<!--
 * @Author: boyyang
 * @Date: 2022-01-09 00:24:39
 * @LastEditTime: 2022-01-26 15:55:15
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\home\homeMenuBottomItem.vue
-->

<template>
    <i :class="['iconfont', 'icon-item', props.iconName]" @click="iconClick"></i>
</template>

<script lang="ts" setup>
interface IHomeMenuBottomItemProps {
    iconName?: string;
    iconColor?: string;
    iconSize?: string | number;
    hoverColor?: string;
    tag?: any
}
interface IHomeMenuBottomItemEmits {
    (e: 'iconClick', tag?: any): void
}

const props = withDefaults(defineProps<IHomeMenuBottomItemProps>(), {
    iconName: 'icon-githubcolor',
    iconColor: 'white',
    iconSize: 20,
    hoverColor: '#f00056',
    tag: ''
})

const emits = defineEmits<IHomeMenuBottomItemEmits>()

const iconClick = () => {
    emits('iconClick', props.tag)
}

</script>

<style scoped lang="scss">
.icon-item {
    color: v-bind("props.iconColor");
    font-size: calc(v-bind("props.iconSize") * 1px);
    cursor: pointer;

    transition: all 0.5s linear;

    &:hover {
        color: v-bind("props.hoverColor");
    }
}
</style>